<template>
	<view class="app-container">
		<view class="search-container">
			<uni-search-bar @confirm="handleSearch" @input="handleSearchInput" placeholder="请输入协议编码/名称" />
		</view>
		<view class="tabs-container">
			<view class="tabs">
				<view v-for="(tab, idx) in tabs" :key="idx" class="tab-item" :class="{ active: currentTab === idx }"
					@click="handleTabClick({ currentIndex: idx })">
					{{ tab }}
				</view>
			</view>
		</view>

		<view class="list-container">
			<uni-list>
				<uni-list-item v-for="(item, index) in list" :key="index" :title="item.frameworkName" clickable
					@click="handleView(item)">
					<template v-slot:body>
						<view class="list-item-body">
							<view class="item-left">
								<view class="meta-row">
									<text class="meta">合同编号：{{ item.frameworkCode }}</text>
								</view>
								<view class="meta-row">
									<text class="meta">收货公司：{{ item.receiverCompanyName }}</text>
								</view>
								<view class="meta-row">
									<text class="meta">发货公司：{{ item.senderCompanyName }}</text>
								</view>
							</view>
							<view class="item-right">
								<uni-tag :text="formatStatus(item.status)" :type="getStatusType(item.status)" />
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-load-more :status="loadingStatus" />
		</view>
	</view>
</template>

<script>
import { listSupplyFramework } from '@/api/kanban/supplyFramework'

export default {
	name: 'SupplyFrameworkList',
	data () {
		return {
			queryParams: {
				pageNum: 1,
				pageSize: 9999,
				keyword: undefined,
				status: undefined
			},
			list: [],
			loadingStatus: 'more',
			currentTab: 0,
			tabs: ['全部', '草稿', '待确认', '生效', '已过期'],
			total: 0
		}
	},
	onLoad () {
		this.getList()
	},
	methods: {
		getList () {
			if (this.loadingStatus === 'loading') return
			this.loadingStatus = 'loading'
			listSupplyFramework(this.queryParams).then(response => {
				const rows = response.rows || []
				this.list = this.list.concat(rows)
				// 兼容后端未返回 total 的场景：用当前页返回数量判断是否还有更多
				const hasTotal = typeof response.total === 'number' && response.total >= 0
				this.total = hasTotal ? response.total : null
				if (hasTotal) {
					this.loadingStatus = (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) ? 'noMore' : 'more'
				} else {
					this.loadingStatus = (rows.length < this.queryParams.pageSize) ? 'noMore' : 'more'
				}
			}).catch(() => {
				this.loadingStatus = 'more'
			})
		},
		handleSearch (e) {
			this.queryParams.keyword = e.value
			this.resetList()
			this.getList()
		},
		handleSearchInput (e) {
			if (!e.value) {
				this.queryParams.keyword = ''
				this.resetList()
				this.getList()
			}
		},
		handleTabClick (e) {
			this.currentTab = e.currentIndex
			const statusMap = {
				0: undefined, // 全部
				1: '10', // 草稿
				2: '20', // 待确认
				3: '0', // 生效
				4: '-20' // 已过期
			}
			this.queryParams.status = statusMap[this.currentTab]
			this.resetList()
			this.getList()
		},
		resetList () {
			this.list = []
			this.queryParams.pageNum = 1
		},
		handleView (item) {
			this.$tab.navigateTo('/pages/kanban/supplyFramework/detail?id=' + item.id)
		},
		formatStatus (status) {
			const statusMap = { '0': '生效', '10': '草稿', '20': '待确认', '-10': '已作废', '-20': '已过期' }
			return statusMap[String(status)] || ''
		},
		getStatusType (status) {
			const typeMap = { '0': 'success', '10': 'default', '20': 'warning', '-10': 'error', '-20': 'info' }
			return typeMap[String(status)] || 'default'
		}
	},
	onReachBottom () {
		if (this.loadingStatus === 'more') {
			this.queryParams.pageNum++
			this.getList()
		}
	}
}
</script>

<style lang="scss" scoped>
.search-container {
	padding: 10px;
}

.tabs-container {
	margin-bottom: 10px;
}

.tabs {
	display: flex;
	padding: 0 10px;
}

.tab-item {
	margin-right: 10px;
	padding: 6px 12px;
	border-radius: 16px;
	background: #f5f5f5;
	color: #666;
}

.tab-item.active {
	background: #007aff;
	color: #fff;
}

.list-item-body {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.item-left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.meta-row {
	display: flex;
	flex-wrap: wrap;
}

.meta {
	font-size: 12px;
	color: #999;
	margin-right: 12px;
}

.item-status {
	margin-left: 10px;
}
.item-right {
	margin-left: auto;
	display: flex;
	align-items: center;
}
</style>